<template>
  <section class="todoapp">
   <HmTodolistHeader @addList="addList"></HmTodolistHeader>

   <HmTodolistBody :List="render"
  @changeFlag="changeFlag"
  @delList='delList'
  @choseAll='choseAll'
   ></HmTodolistBody>

   <HmTodolistFooter
    :sum='sum'
    :isShow='isShow'
    :type='type'
    @changeType='changeType'
    @delAll='delAll'
   ></HmTodolistFooter>


  </section>
</template>

<script>
import HmTodolistHeader from "./components/HmTodolistHeader.vue"
import HmTodolistBody from "./components/HmTodolistBody.vue"
import HmTodolistFooter from "./components/HmTodolistFooter.vue"
export default {
  components:{
    HmTodolistHeader,
    HmTodolistBody,
    HmTodolistFooter,
  },
  data(){
    return {
      List:[
        {
          flag:true,
          content:'行万里路',
          id:1
        },
        {
          flag:false,
          content:'读万卷书',
          id:2
        }
      ],
      type:'all'
    }
  },
  methods:{
    addList(value){
      this.List=[...this.List,{flag:false,content:value,id:+new Date()}]
    },
    changeFlag(id,num){
        this.List.forEach(item=>item.id===id?item.flag=num:'')
    },
    changeType(value){
      this.type=value
    },
    delAll(){
      this.List=this.List.filter(item=>!item.flag)
    },
    delList(id){
      this.List=this.List.filter(item=>item.id!==id)
    },
    choseAll(sum){
      this.List.forEach(item=>item.flag=sum)
    }
  },
  computed:{
    sum(){
      return this.List.filter(item=>!item.flag).length
    },
    isShow(){
      return this.List.some(item=>item.flag)
    },
    render(){
      switch(this.type){
        case 'all':
          return this.List
          case 'active':
            return this.List.filter(item=>!item.flag)
            case 'completed':
            return this.List.filter(item=>item.flag)
            default:
              return this.List
      }
    }
  }
}
</script>

<style></style>


